<!DOCTYPE html>
<html lang="en">
  <head>
    <script type="module">
      import { h, text, patch } from "./superfine.js"

      const run = (
        { init, view, update, node },
        state,
        emit = (action) => next(update(state, action)),
        next = (newState) => {
          node = patch(node, view((state = newState), emit))
        }
      ) => next(init())

      run({
        init: () => 0,
        view: (state, emit) =>
          h("main", {}, [
            h("h1", {}, text(state)),
            h("button", { onclick: () => emit("Subtract") }, text("-")),
            h("button", { onclick: () => emit("Add") }, text("+")),
          ]),
        update: (state, action) =>
          action === "Subtract" ? state - 1 :
          action === "Add" ? state + 1 : state,
        node: document.getElementById("app"),
      })
    </script>
  </head>
  <body>
    <main id="app"></main>
  </body>
</html>
